<!--  -->
<template>
  <div class="wrap" :loading="loading">
    <!-- <div class="lg-title">
      <span>工业监测审计系统</span>
    </div> -->
    <div class="main" :style="{backgroundImage:`url(${loginBackground})`}">
      <div class="login">
        <div class="login-name">
          <i class="iconfont icon-anquandunpai"></i><span>账号登录</span>
        </div>
        <div class="login-form">
          <el-form :model="loginForm" :rules="rules" ref="loginForm" :show-message = false>
            <el-row :gutter="24">
              <el-col :xs="12" :sm="12" :lg="12">
                <el-form-item prop="username">
                  <el-input prefix-icon="el-icon-user" v-model="loginForm.username" placeholder="请输入账号" @keyup.enter.native="loginEnterFun" oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')" maxlength="10">
                    <i style="cursor: pointer" slot="suffix" @click="loginForm.username = ''" class="el-icon-circle-close" />
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="12">
                <el-form-item prop="password">
                  <el-input v-model="loginForm.password" :type="type === true ? 'text':'password'" placeholder="请输入密码" @keyup.enter.native="loginEnterFun"  oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')" maxlength="32">
                    <svg-icon style="cursor: pointer" slot="suffix" @click="type = !type" :icon-class="type ? 'eye-open' : 'eye'" />
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item class="form-submit">
              <el-button type="primary" class="submit"  @click="login('loginForm')">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="login-method">
          <!-- <img :src="loginLogoIcon" alt=""> -->
          <p style="font-size:18px;">{{companyName}}</p>
        </div>
      </div>
      <div class="download">
        <!-- <el-link type="warning" :underline="false" @click="DownloadFile2()" style="margin-right:10px;">下载客户端安装包</el-link> -->
        <el-link type="warning" :underline="false" @click="DownloadFile1()">下载熊猫出海AI大使客户端</el-link>
      </div>
    </div>
  </div>
</template>

<script>
import { downloadfile } from '@/api/firstPage'
export default {
  data() {
    return {
      loading: false,
      type: false,
      loginForm:{
        username:'',
        password:''
      },
      rules:{
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password:[
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      companyName: '',
      // loginLogoIcon: '',
      loginBackground: ''
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.companyName = process.env.NODE_ENV === 'development' ? '企智库' : Glod.companyName
    // this.loginLogoIcon = process.env.NODE_ENV === 'development' ? require('../../assets/logo.png') : Glod.loginLogoIcon
    this.loginBackground = process.env.NODE_ENV === 'development' ? require('../../assets/login2.jpg') : Glod.loginBackground
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    loginEnterFun(e){
      var keyCode = window.event? e.keyCode:e.which;
      var val = e.target.value;
      if(keyCode == 13 && val){
        this.login('loginForm')
      }
    },
    login(loginForm){
      this.loading = true
      this.$refs[loginForm].validate((valid) => {
        if( valid ){
          if(this.loginForm.username.length > 32){
            this.$message.error('用户名长度过长')
            return false
          }
          if(this.loginForm.password.length > 32){
            this.$message.error('密码长度过长')
            return false
          }
          this.$store.dispatch('user/login', this.loginForm)
          .then(() => {
            this.$router.push({ path: '/' })
            this.loading = false
          })
          .catch(() => {
            this.loading = false
          })
        }
        else{
          this.loading = false
          this.$message.error('请输入账号密码')
          return false
        }
      })
    },
    async DownloadFile2(){
      const data = {
        Data:{
          FileName: 'SecClientAI_S.exe'
        }
      }
      const res = await downloadfile('DownloadPublicFile', data)
      let blobUrl = window.URL.createObjectURL(new Blob([res]));
      const a = document.createElement('a');
      a.style.display = 'none';
      a.download = 'SecClientAI_S.exe';
      a.href = blobUrl;
      a.click();
    },
    async DownloadFile1(){
      const data = {
        Data:{
          FileName: '熊猫出海AI大使网络加速助手.rar'
        }
      }
      const res = await downloadfile('DownloadPublicFile', data)
      let blobUrl = window.URL.createObjectURL(new Blob([res]));
      const a = document.createElement('a');
      a.style.display = 'none';
      a.download = '熊猫出海AI大使网络加速助手.rar';
      a.href = blobUrl;
      a.click();
    }
  }
};
</script>
<style scoped lang='scss'>
  .theme{
    margin: 20px;
    display: flex;
    flex-direction: column;
    a{
      cursor: pointer;
      padding-bottom: 10px;
      &:hover{
        color: #06b4fd;
      }
    }
  }
  .wrap{
    // position: relative;
    display: flex;
    align-items: center;
    height: 100vh;
    .lg-title{
      font-size: 45px;
      text-align: left;
      letter-spacing: 11px;
      font-weight: bold;
      color: #b4946e ;
      padding: 30px 120px;
      // background: linear-gradient(to right, #1743ff, #00b3ff);
      // background-clip: text;
      // color: transparent;
    }
    .main{
      position: relative;
      width: 100%;
      height: 500px;
      min-width: 1000px;
      background: url('../../assets/login2.jpg') #5b4d43 center top  no-repeat;
      background-size: auto 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      .download{
        position: absolute;
        right: 10px;
        bottom: 10px;
        color: #d6b086 !important;
      }
      .login{
        color: #d6b086;
        width: 480px;
        margin-left: 550px;
        background: rgba(255, 255, 255,.9);
        border-radius: 10px;
        &-name{
          font-size: 20px;
          text-align: center;
          padding: 5px 25px;
          display: flex;
          align-items: center;
          justify-content: center;
          .icon-anquandunpai{
            font-size: 24px;
            padding-right: 10px;
            color: #957d61;
          }
          span{
            line-height: 40px;
            // font-weight: bold;
          }
        }
        &-form{
          border-top: 1px solid #ddd;
          padding: 30px 25px;
          ::v-deep .el-input{
            height: 45px;
            line-height: 45px;
            background: #fff;
            border: 1px solid #eee;
            border-radius:5px;
            .el-input__inner{
              font-size: 16px;
              text-indent: 16px;
              color: #000;
              background: none;
              border: none;
            }
            .el-input__inner::placeholder {
              color: #000;
              letter-spacing: 4px;
            }
            .el-input__icon{
              font-size: 25px;
              color: #967d60;
            }
          }
          .form-submit{
            width: 200px;
            margin: 0 auto;
          }
          .submit{
            width: 100%;
            height: 45px;
            font-size: 18px;
            letter-spacing: 10px;
            text-indent: 10px;
            text-align: center;
            background: #a26543;
            border: none;
            margin: 25px auto 0px;
            border-radius: 5px;
          }
        }
        &-method{
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 55px;
          font-size: 20px;
          text-align: center;
          background: rgba(255, 255, 255,.8);
          border-radius: 10px;
          img{
            width: 30px;
            margin-right: 10px;
            // border-radius: 30px;
            // background: rgba(255, 255, 255, .8)
          }
          div{
            cursor: pointer;
            .iconfont{
              position: relative;
              font-size: 20px;
              padding-right: 10px;
              z-index: 2;
            }
            .icon-zhifubao{
              color: #06b4fd;
            }
            .icon-weixin{
              margin-left: 30px;
              color: #28c445;
            }
          }
          .yuan{
            position: absolute;
            width: 19px;
            height: 19px;
            background: #fff;
            border-radius: 50%;
          }
          .yuan1{
            left: 218px;
          }
          .yuan2{
            left: 338px;
          }
        }
      }
    }
  }
</style>

<style>
/* 去掉记住密码填充样式 */
input:-webkit-autofill {
  transition: background-color 5000s ease-in-out 0s;
}
input:-webkit-autofill {
    box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: #000;
}
</style>